renderUsername()
checkLogin()
registerLoginOut()
async function getData() {
    const res = await axios.get("/students")
    const html = res.data.map(v=>{

       const{name,age,gender,group,hope_salary,salary,province ,city, area, id } =v
        return `
        <tr>
            <td>${name}</td>
            <td>${age}</td>
            <td>${gender=== 1 ? "男" : "女"}</td>
            <td>${group}组</td>
            <td>${hope_salary}</td>
            <td>${salary}</td>
            <td>${province+city+area}</td>
            <td data-id="${id}">
            <a href="javascript:;" class="text-success mr-3"> <i class="bi bi-pen"></i></a>
            <a href="javascript:;" class="text-danger "> <i class="bi bi-trash"></i></a>
            </td>
        </tr>
        `
    }).join('')

   document.querySelector(".list").innerHTML = html
   document.querySelector(".total").innerHTML = res.data.length
}
getData()
const modalDom = document.querySelector("#modal")
const modal = new bootstrap.Modal(modalDom)

document.querySelector("#openModal").addEventListener("click",()=>{
    modal.show()
})
const proSelect = document.querySelector("[name=province]")
const citySelect = document.querySelector("[name=city]")
const areaSelect = document.querySelector("[name=area")

async function initSelect(){
const proRes =await axios.get("/api/province")

const proHtml= proRes.list.map(v =>{
    return`<option value="${v}">${v}</option>}`
}).join("")
proSelect.innerHTML =`<option value="">--请选择--</option>${proHtml}`

//城市
proSelect.addEventListener("change",async()=>{
    const cityRes = await axios.get("/api/city")
    const cityHtml=cityRes.list.map(v=>{
     return`<option value="${v}">${v}</option>`
}).join("")
citySelect.innerHTML =`<option value="">--请选择--</option>${cityHtml}`
areaSelect.innerHTML =`<option value="">--请选择--</option>`
})

//区域
citySelect.addEventListener("change",async()=>{
    const areaRes = await axios.get("/api/area")
    const areaHtml=areaRes.list.map(v=>{
     return`<option value="${v}">${v}</option>`
}).join("")
areaSelect.innerHTML =`<option value="">--请选择--</option>${areaHtml}`
})
}





initSelect()
//绑定弹窗 确定按钮 点击事件
document.querySelector("#submit").addEventListener("click",()=>{
    if(modalDom.dataset.id){
        //编辑
        saveStudent()

    }else{
        //添加
        addStudent()
    }
})

document.querySelector(".list").addEventListener("click",(e)=>{
    if(e.target.classList.contains("bi-trash")){
        const id = e.target.parentNode.parentNode.dataset.id
       delStudent(id)
    }
    if(e.target.classList.contains("bi-pen")){
        const id = e.target.parentNode.parentNode.dataset.id
        editStudent(id)
}
})
document.querySelector("#openModal").addEventListener("click",()=>{
document.querySelector(".modal-title").innerHTML="添加学生"
document.querySelector("form").reset()
citySelect.innerHTML =`<option value="">--城市--</option>`
areaSelect.innerHTML =`<option value="">--地区--</option>`
modalDom.dataset.id=''
modal.show()
})
async function editStudent(id){
    const res = await axios.get(`/students/${id}`)
    document.querySelector(".modal-title").innerHTML="编辑学生"
   const keyArr =["name","age","group","hope_salary","salary"]
   keyArr.forEach(key=>{
    console.log(res.data);
    document.querySelector(`[name=${key}]`).value = res.data[key]
})

//性别
const {gender} = res.data
const chks = document.querySelectorAll("[name=gender]")
chks [gender].checked = true
//省
const {province ,city,area }= res.data
proSelect.value=province
//市
const cityRes = await axios.get("/api/city",{
    params:{
      pname:province,
      
    }
})
const cityHtml=cityRes.list.map(v=>{
    return`<option value="${v}">${v}</option>`
}).join("")
citySelect.innerHTML =`<option value="">--城市--</option><option value=${city}>${city}</option>${cityHtml}`
citySelect.value=city
//区
const areaRes = await axios.get("/api/area",{
    params:{
      pname:province,
      cname:city
      
    }
})
const areaHtml=areaRes.list.map(v=>{
    return`<option value="${v}">${v}</option>`
}).join("")
areaSelect.innerHTML =`<option value="">--地区--</option><option value=${area}>${area}</option>${areaHtml}`
areaSelect.value=area

modal.show()
modalDom.dataset.id=id
//  -----
}
async function delStudent(id){
    const res = await axios.delete(`students/${id}`)
    showToast(res.message)
    getData()
}

async function addStudent(){
   const form = document.querySelector("#form")
   const data = serialize(form,{empty:true,hash:true})

   data.age = + data.age
   data.gender = + data.gender
   data.hope_salary = + data.hope_salary
   data.salary = + data.salary
   data.group = + data.group
  try{
    const res = await axios.post("/students",data)
    showToast(res.message)
    getData()
  }catch(error){
    showToast(error.response.data.message)
  }
  modal.hide()
}
async function saveStudent(){

    const form = document.querySelector("#form")
    const data = serialize(form,{empty:true,hash:true})

    data.age = + data.age
    data.gender = + data.gender
    data.hope_salary = + data.hope_salary
    data.salary = + data.salary
    data.group = + data.group
   try{
     const res = await axios.put( `/students/${modalDom.dataset.id}`,data)
     showToast(res.message)
     getData()
   }catch(err){
     showToast("error.response.data.message")
   }
   modal.hide()
}